<!--
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-05-30 22:39:21
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-05-31 13:14:56
 * @FilePath: \vue3_nuxt_demo\components\NoteItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="note-item" v-if="props.note">
    <div class="note-item-main">
      <div class="note-item-title">{{ props.note.title }}</div>
      <div class="note-item-content">
        {{ props.note.subTitle || '暂无内容' }}
      </div>
      <div class="note-item-opear">
        <div class="jsd-meta">
          <i-ion-diamond />
          <small>136.0</small>
        </div>
        <div class="nickname">
          <i-ant-design-user-outlined />
          <small>{{ props.note.nickname }}</small>
        </div>
        <div class="comments">
          <i-mdi-message />
          <small>10</small>
        </div>
        <div class="like">
          <i-mdi-cards-heart :style="{ color: props.note.flag ? 'red' : '' }" />
          <small>{{ props.note.like }}</small>
        </div>
      </div>
    </div>
    <div class="note-item-cover">
      <a-image width="125px" height="70px" :preview="false" :src="props.note.cover || viewUrl" alt="avatar"
        :fallback="viewUrl" />
    </div>
  </div>
</template>

<script setup>

import { useErrorImage } from '@/composables/state';

const props = defineProps(["note", "index"]);

// 预加载错误图片
const viewUrl = useErrorImage();

</script>


<style lang="less" scoped>
.note-item {
  border-bottom: 1px #F0F0F0 solid;
  padding: 15px 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .note-item-main {

    .note-item-title {
      font-size: 20px;
      font-weight: bolder;
    }

    .note-item-content {
      margin: 10px 0;
      font-size: 16px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .note-item-opear {
      display: flex;
      align-items: center;

      .jsd-meta,
      .nickname,
      .comments,
      .like {
        display: flex;
        align-items: center;
        margin: 0 5px;

        svg {
          font-size: 12px;
          margin-right: 5px;
        }
      }

      .jsd-meta {
        color: #E05344;
      }
    }
  }
}
</style>